<!--用户管理页-->
<template>
  <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">用户管理</span>
    <el-button type="success" style="float:right;margin-top: 10px;margin-right: 10px;"
               @click="loginDialogVisible=true">登录</el-button>
    <el-button type="warning" style="float:right;margin-top: 10px;margin-right: 10px;"
               @click="registerDialogVisible=true">注册</el-button>
  </div>

  <!-- 新建用户弹窗 -->
  <el-dialog>
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveUserForm.age"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <el-radio border label="男" value="1" style="margin:0;"></el-radio>
              <el-radio border label="女" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户状态">
            <el-radio-group v-model="saveUserForm.status">
              <el-radio border label="启用" value="1" style="margin:0;"></el-radio>
              <el-radio border label="禁用" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>

  <!-- 登录弹窗 -->
  <el-dialog
      title="登录"
      style="width: 500px;padding:40px;"
      v-model="loginDialogVisible"
      :before-close="handleLoginClose"
  >
    <el-form label-width="80px" label-position="top">
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" placeholder="请输入密码" v-model="loginForm.password"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleLoginClose">取消</el-button>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </template>
  </el-dialog>

  <!-- 注册弹窗 -->
  <el-dialog
      title="注册"
      style="width: 500px;padding:40px;"
      v-model="registerDialogVisible"
      :before-close="handleRegisterClose"
  >
    <el-form label-width="80px" label-position="top">
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="registerForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" placeholder="请输入密码" v-model="registerForm.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" placeholder="请再次输入密码" v-model="registerForm.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleRegisterClose">取消</el-button>
      <el-button type="primary" @click="handleRegister">注册</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

//定义变量用来控制弹窗是否出现
const dialogVisible = ref(false);
const loginDialogVisible = ref(false);
const registerDialogVisible = ref(false);

//定义数组维护可选的领导数据
const leaderOptions = [
  {username:'AA',id:'101'},
  {username:'BB',id:'102'}
];

//定义对象用来保存新增员工表单中收集的数据
const saveUserForm = ref({
  username:'',
  phone:'',
  email:'',
  age:'',
  level:'',
  parentId:'',
  gender:'',
  status:''
});

//定义登录表单数据
const loginForm = ref({
  username: '',
  password: ''
});

//定义注册表单数据
const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: ''
});

//定义一个保存员工的方法
const saveUser = ()=>{
  console.log(saveUserForm.value);
  axios.post(BASE_URL+'/v1/user/save',saveUserForm.value)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('保存成功!');
          dialogVisible.value = false;
          saveUserForm.value = {};
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

//定义处理关闭弹窗的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    saveUserForm.value = {};
    dialogVisible.value = false;
  }
}

//定义处理登录弹窗关闭的方法
const handleLoginClose = ()=>{
  if(confirm('您确认要关闭登录弹窗吗?')){
    loginForm.value = {};
    loginDialogVisible.value = false;
  }
}

//定义处理注册弹窗关闭的方法
const handleRegisterClose = ()=>{
  if(confirm('您确认要关闭注册弹窗吗?')){
    registerForm.value = {};
    registerDialogVisible.value = false;
  }
}

//定义处理登录的方法
const handleLogin = ()=>{
  if (!loginForm.value.username || !loginForm.value.password) {
    ElMessage.error('用户名和密码不能为空');
    return;
  }

  axios.post(BASE_URL+'/v1/user/login', loginForm.value)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('登录成功!');
          loginDialogVisible.value = false;
          loginForm.value = {};
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

//定义处理注册的方法
const handleRegister = ()=>{
  if (!registerForm.value.username || !registerForm.value.password || !registerForm.value.confirmPassword) {
    ElMessage.error('用户名、密码和确认密码不能为空');
    return;
  }

  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    ElMessage.error('两次输入的密码不一致');
    return;
  }

  axios.post(BASE_URL+'/v1/user/register', registerForm.value)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('注册成功!');
          registerDialogVisible.value = false;
          registerForm.value = {};
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
</script>

<style scoped>
.el-button {
  margin-left: 10px;
}
</style>